import { PagedRequestDto } from "@/libs/PagedRequestDto";
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
} from "@vue/runtime-core";
import {
  Button,
  Card,
  DatePicker,
  Form,
  Input,
  Space,
  Table,
  Tag,
  Typography,
} from "ant-design-vue";
import {
  ClockCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  SyncOutlined,
} from "@ant-design/icons-vue";
import TaskDetail from "./Detail";
import { ref } from "vue";
import util from "@/utils/index";
import { getTaskPaged } from "@/api/task";

class PagedTaskRequestDto extends PagedRequestDto {
  status?: number;
  userId?: string;
}

export default defineComponent({
  name: "tasks",
  setup() {
    const taskDetailRef = ref();
    const state = reactive({
      loading: false,
      query: new PagedTaskRequestDto(),
      columns: [
        {
          dataIndex: "name",
          title: "任务名称",
          sorter: true,
          customRender: (row: { text: string; record: any }) => {
            return (
              <>
                <Typography.Link
                  title="查看任务详情"
                  onClick={() => {
                    console.log(row.record);
                    taskDetailRef.value.openModal("任务详情", row.record.id);
                  }}
                >
                  {row.text}
                </Typography.Link>
              </>
            );
          },
        },
        {
          dataIndex: "request",
          title: "请求参数",
          ellipsis: true,
          customRender: (row: { text: object }) => {
            return row.text ? JSON.stringify(row.text) : "";
          },
        },
        {
          dataIndex: "response",
          title: "服务响应",
          ellipsis: true,
          customRender: (row: { text: object }) => {
            return row.text ? JSON.stringify(row.text) : "";
          },
        },
        {
          dataIndex: "responseResult",
          title: "响应结果",
          sorter: true,
          customRender: (row: { text: number }) => {
            return (
              <>
                {row.text == 0 ? (
                  <Tag color="default" icon={<ClockCircleOutlined />}>
                    Unknown
                  </Tag>
                ) : row.text == 1 ? (
                  <Tag color="success" icon={<CheckCircleOutlined />}>
                    Success
                  </Tag>
                ) : (
                  <Tag color="error" icon={<CloseCircleOutlined />}>
                    Error
                  </Tag>
                )}
              </>
            );
          },
        },
        {
          dataIndex: "error",
          title: "异常",
          ellipsis: true,
        },
        {
          dataIndex: "status",
          title: "状态",
          sorter: true,
          filters: [
            {
              text: "队列中",
              value: 0,
            },
            {
              text: "执行中",
              value: 1,
            },
            {
              text: "已执行",
              value: 2,
            },
            {
              text: "已取消",
              value: 3,
            },
          ],
          customRender: (row: { text: number }) => {
            return (
              <>
                {row.text == 0 ? (
                  <Tag
                    color="default"
                    icon={<ClockCircleOutlined spin={true} />}
                  >
                    队列中
                  </Tag>
                ) : row.text == 1 ? (
                  <Tag color="default" icon={<SyncOutlined spin={true} />}>
                    执行中
                  </Tag>
                ) : row.text == 2 ? (
                  <Tag color="success" icon={<CheckCircleOutlined />}>
                    已执行
                  </Tag>
                ) : (
                  <Tag color="error" icon={<CloseCircleOutlined />}>
                    已取消
                  </Tag>
                )}
              </>
            );
          },
        },
        {
          dataIndex: "remark",
          title: "备注",
        },
        {
          dataIndex: "creator",
          title: "创建人",
          sorter: true,
        },
        {
          dataIndex: "creationTime",
          title: "创建时间",
          ellipsis: true,
          sorter: true,
          customRender: (row: { text: string }) => {
            return util.dateFormat(row.text);
          },
        },
      ],
      data: [],
    });

    const getPaged = () => {
      state.loading = true;
      getTaskPaged({
        sorting: state.query.sorting,
        skipCount: state.query.skipCount,
        maxResultCount: state.query.maxResultCount,
        userId: state.query.userId,
        status: state.query.status,
      })
        .then((res: any) => {
          state.data = res.result.items;
          state.query.total = res.result.totalCount;
        })
        .finally(() => {
          state.loading = false;
        });
    };

    onMounted(() => {
      getPaged();
    });

    return {
      ...toRefs(state),
      taskDetailRef,
      getPaged,
    };
  },
  render() {
    return (
      <>
        <Card>
          <div style={{ marginBottom: "16px" }}>
            <Form layout="inline">
              <Form.Item label="服务Id">
                <Input />
              </Form.Item>
              <Form.Item label="调用人">
                <Input />
              </Form.Item>
              <Form.Item label="起止日期">
                <DatePicker.RangePicker />
              </Form.Item>
              <Form.Item>
                <Space>
                  <Button type="primary">查询</Button>
                  <Button type="default">取消</Button>
                </Space>
              </Form.Item>
            </Form>
          </div>

          <Table
            rowKey="id"
            size="middle"
            loading={this.loading}
            columns={this.columns}
            dataSource={this.data}
            pagination={{
              pageSize: this.query.pageSize,
              current: this.query.pageSize,
              total: this.query.total,
              onChange: (page: number, pageSize: number) => {
                this.query.page = page;
                this.query.pageSize = pageSize;
                this.getPaged();
              },
              onShowSizeChange: (current: number, size: number) => {
                this.query.pageSize = size;
                this.getPaged();
              },
            }}
          ></Table>
        </Card>

        <TaskDetail ref="taskDetailRef" />
      </>
    );
  },
});
